<template>
    <div class="viewer">
        <div class="previous-chapter-single-container">
            <span class="icon-dropdown previous-chapter-single"></span>
        </div>
        <div class="next-chapter-single-container">
            <span class="icon-dropdown next-chapter-single"></span>
        </div>
        <!-- <div class="reader-setting-icon-container">
            <Icon class="toutiao-icon" name="toutiao" width="20" height="20" color="#2d4059" />
        </div> -->
        <div style="position: fixed;z-index: 9999;inset: 16px;pointer-events: none;"></div>
        <div class="html-viewer-page" id="page-area" :style="{ width: (windowWidth - 60) + 'px' }">
            <iframe id="reader-iframe" name="reader-iframe" width="100%" frameborder="0" scrolling="no" seamless
                :style="{ height: (windowHeight - 80) + 'px' }">
            </iframe>
        </div>
        <!-- 最底层 -->
        <div class="background" style="width: 100%;left: 0;"></div>
        <!--底层2  -->
        <div class="background-box2" style="left: 5px;"></div>
        <!--底层3  -->
        <div class="background-box3" style="left: 7px;">
            <div class="book-snipe"></div>
        </div>
        <!--底层1  -->
        <div class="background-box1" style="left: 9px;"></div>
    </div>
</template>
<script setup lang="ts">
// import Icon from "@/components/Icon/icon.vue";
import { getQueryVariable } from "@/utils/tools";
import { getBookContent } from '@/utils/readUtil'
import { ElMessage } from "element-plus";
import '@/styles/readViewer/index.scss'

const bookKey = getQueryVariable('bookKey');
let windowHeight = ref(0);
let windowWidth = ref(0);
const iframeHasContent = ref(false)

const windwoResize = () => {
    window.onresize = () => {
        windowHeight.value = window.innerHeight;
        windowWidth.value = window.innerWidth;
        window.location.reload();
    }
}
const loadBookContent = (bookKey: string) => {
    bookKey && getBookContent(bookKey).then((res) => {
        let lines = (res as string).split('\n')
        createIframeElement(lines)
    }).catch(error => {
        let msg = typeof error == 'string' ? error : '获取图书数据失败！';
        ElMessage.error(msg)
    })

}
loadBookContent(bookKey as string)



const addInternalStyleSheet = () => {
    const style = document.createElement('style');
    style.textContent = `
        .p-txt {
            font-size: 18px;
            line-height: 1.25;
            background-color: transparent;
            margin: 0;
            padding: 0;
            word-wrap: break-word !important;
            writing-mode: horizontal-tb !important;
        }
    `;
    return style
}
const createIframeElement = (lines: string[]) => {
    const iframe = document.querySelector('iframe')
    const fragment = new DocumentFragment();
    if (lines.length > 0) {
        iframeHasContent.value = true
        lines.forEach(line => {
            let element = null;
            if (line.trim() == '') {
                element = document.createElement('br')
            } else {
                element = document.createElement('p');
                element.textContent = line
                element.className = 'p-txt'
            }
            fragment.appendChild(element)
        })
        if (iframe) {
            // 获取iframe的内容窗口
            let frameWin = iframe.contentWindow;
            // 获取iframe中的document
            let frameDoc = frameWin?.document;
            let frameBody = frameDoc?.body;
            frameDoc?.head.appendChild(addInternalStyleSheet())
            let pageAreaWidth = windowWidth.value - 60;
            if (frameBody) {
                frameBody.style.width = 'auto';
                frameBody.style.height = '100%';
                frameBody.style.overflow = 'hidden';
                frameBody.style.padding = '0';
                frameBody.style.margin = '0';
                frameBody.style.boxSizing = 'border-box';
                frameBody.style.touchAction = 'none';
                frameBody.style.overscrollBehavior = 'none';
                frameBody.style.maxWidth = 'inherit';
                frameBody.style.columnFill = 'auto';
                frameBody.style.columnGap = '112px';
                frameBody.style.columnWidth = (Math.ceil(pageAreaWidth / 2) - 112) + 'px';
                frameBody.appendChild(fragment)
            }
        } else {
            let count = 0
            let timer = setTimeout(() => {
                if (count == 20) {
                    clearTimeout(timer)
                    count++;
                    ElMessage.error('加载失败!尝试刷新一下~')
                } else {
                    createIframeElement(lines)
                }
            }, 500);
        }
    }
}

onMounted(() => {
    windowHeight.value = window.innerHeight;
    windowWidth.value = window.innerWidth;
    windwoResize();
})
</script>
<style lang="scss" scoped>


.html-viewer-page {
    position: absolute;
    bottom: 40px;
    left: 30px;
    // left: calc(-672px + 50vw);
    right: 30px;
    top: 40px;
    user-select: text;
    z-index: 5;
}

#reader-iframe {
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    vertical-align: baseline;
}

.background-box1,
.background-box2,
.background-box3 {
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.18);
}

.background-box1,
.background-box2 {
    position: absolute;
    bottom: 5px;
    top: 5px;
    border: 1px solid #bfbfbf;
}

.background-box2 {
    left: 7px;
    right: 7px;
    z-index: 1;
}

.background-box3 {
    position: absolute;
    bottom: 5px;
    top: 5px;
    left: 9px;
    right: 9px;
    border: 1px solid #bfbfbf;
    overflow: hidden;
    z-index: 2;
}

.background-box1 {
    left: 5px;
    right: 5px;
    z-index: 0;
}

.book-snipe {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #bfbfbf;
    border-left: none;
    z-index: 10;

}
</style>